<template>
  <div>
    <div id="navigation" class="pointer">
      <img id="logo" src="./../../static/image/logo-white.png" />
      <!-- 未登录 -->
      <div v-show="username === null">
      <ul id="navul" class="list-inline font-face">
        <li class="navli" @click="shouye">
          <a class="nava nav-active" >首 页</a>
        </li>
        <li class="navli" @mouseenter="strategyflag = true" @mouseleave="strategyflag = false">
          <a class="nava" >策略研究</a>
          <div id="submenu" v-if="strategyflag" @mouseenter="strategyflag = true" @mouseleave="strategyflag = false">
            <a class="item" @click="celueguangchang">策略广场</a>
            <a v-if="permission.indexOf('A1') != -1" class="item" @click="celueyanjiu">我的策略</a>
          </div>
        </li>
        <li v-if="permission.indexOf('B6') != -1" class="navli">
          <a class="nava" @click="huice">回测详情</a>
        </li>
        <li v-if="permission.indexOf('E6') != -1" class="navli" @click="monijiaoyi">
          <a class="nava" >模拟交易</a>
        </li>
        <li class="navli" @click="lianghuashequ">
          <a class="nava">量化社区</a>
        </li>
        <li class="navli" @click="gupiaoshuju">
          <a class="nava">股票数据</a>
        </li>
        <li class="navli">
          <a class="nava" @click="gongsishuju">公司数据</a>
        </li>
        <li class="navli" style="margin-right:20px;" @click="help">
          <a class="nava" >帮 助</a>
        </li>
        <li class="navli" style="width:50px;" @click="denglu">
          <a style="width:50px;color:#337ab7;" >登录</a>
        </li>
        <li class="navli" style="width:50px;" @click="zhuce" >
          <a style="width:50px;color:#337ab7;" class="nava">注册</a>
        </li>
      </ul>
      </div>
      <!-- 登录 -->
      <div v-show="username !== null">
      <ul id="navul" class="list-inline font-face">
        <li class="navli">
          <a class="nava nav-active" @click="shouye">首 页</a>
        </li>
        <li class="navli" @mouseenter="strategyflag = true" @mouseleave="strategyflag = false">
          <a class="nava" >策略研究</a>
          <!-- <div id="submenu" v-if="flag" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
            <a class="item" @click="celueyanjiu">策略研究</a>
            <a class="item" @click="celuechuangzuo">策略创作</a>
            <a href="#" class="item">策略库</a>
          </div> -->
          <div id="submenu" v-if="strategyflag" @mouseenter="strategyflag = true" @mouseleave="strategyflag = false">
            <a class="item" @click="celueguangchang">策略广场</a>
            <a v-if="permission.indexOf('B2') != -1" class="item" @click="celueyanjiu">我的策略</a>
          </div>
        </li>
        <li v-if="permission.indexOf('B6') != -1" class="navli">
          <a class="nava" @click="huice">回测详情</a>
        </li>
        <li  v-if="permission.indexOf('E6') != -1" class="navli">
          <a class="nava" @click="monijiaoyi" @mouseleave="onMouseOut">模拟交易</a>
        </li>
        <li class="navli">
          <a class="nava" @click="lianghuashequ">量化社区</a>
        </li>
        <li class="navli" v-if="usertype == 3||usertype == 4">
          <a class="nava" :href="herf" target="_blank">投资交流</a>
        </li>
        <li class="navli">
          <a class="nava" @click="gupiaoshuju">股票数据</a>
        </li>
        <li class="navli">
          <a class="nava" @click="gongsishuju">公司数据</a>
        </li>
        <li class="navli" style="margin-right:20px;">
          <a class="nava" @click="help">帮 助</a>
        </li>
        <li  class="navli" style="display:flex;flex-direction:row;" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
          <i class="iconfont icon-yonghu"></i>
          <div class="nava" style="color:#fff;">{{username}}</div>
          <!-- <input v-model="username" type="text"/> -->
          <div id="submenu" v-if="flag" @mouseenter="onMouseOver" @mouseleave="onMouseOut">
            <a class="item" @click="personal">个人中心</a>
            <a class="item" @click="exit">退出</a>
          </div>
        </li>
      </ul>
      </div>
    </div>
    <div style="height:100%;">
      <template>
        <router-view />
      </template>
    </div>
    
  </div>
</template>
<style scoped>
.iconfont{
  color: #ffffff;
  font-size: 20px;
  margin-right: 10px;
  padding-top: 3px;
}
.pointer{
  cursor: pointer;
}
/*导航栏*/
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
body {
  font-family: "Microsoft Yahei", "Open Sans", "Helvetica Neue", "Helvetica",
  sans-serif;
}
a {
  color: #000000;
}
a:hover {
  text-decoration: none;
}
#navigation {
  background-color: #0d1c30;
  width: 100%;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
.navli {
  width: 120px;
  height: 80px;
  text-align: center;
  display: flex;
  justify-content:center;
  align-items: center;
}
#logo {
  padding-left: 100px;
}
#navul {
  display: inline;
  opacity: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navli:hover{
  background: black;
  color: #F7F7F7;
}
.navli a {
  color: white;
}
#submenu {
  position: absolute;
  width: 100px;
  margin-top: 60px;
  background-color: white;
  border-radius: 5px;
  border:1px solid #F7F7F7;
  display: flex;
  flex-direction: column;
}
#submenu a {
  line-height: 40px;
  text-align: center;
  width: 100px;
  color: #3d495c;
  font-size: 13px;
  opacity: 1;
}
.login {
  font-size: 14px;
  color: #337ab7;
  width: 80px;
}
#submenu a:hover{
  background-color: #3C7EEE;
  color: #ffffff;
}
</style>
<script>
import Vue from 'vue'
import shouye from "./shouye/index";
export default {
  components: {
    shouye
  },
  inject: ['reload'],
  data() {
    return {
      flag: false,
      SessionToken: '',
      // username:Vue.prototype.$user,
      username:'',
      strategyflag:false,
      permission:[],
      usertype:'',
      herf:'',

    };
  },
  watch: {
    "$route": function(){
      this.username = localStorage.getItem('username')
      console.log(this.username)
      this.usertype = localStorage.getItem('usertype')
      if(localStorage.getItem('permission') !==''){
        this.permission = localStorage.getItem('permission').split(",")
      }
      this.SessionToken = localStorage.getItem('SessionToken')
      this.herf='http://2n82869a05.wicp.vip/message.html?SessionToken='+this.SessionToken+''
    }
  },
  mounted(){
    this.username = localStorage.getItem('username')
    this.usertype = localStorage.getItem('usertype')
    if(localStorage.getItem('permission') !==''){
      this.permission = localStorage.getItem('permission').split(",")
    }
    this.SessionToken = localStorage.getItem('SessionToken')
    this.herf='http://2n82869a05.wicp.vip/message.html?SessionToken='+this.SessionToken+''
    console.log(this.herf)
    // this.username = localStorage.setItem('username')
    //this.username = Vue.prototype.$user
    // this.permission = localStorage.getItem('permission').split(",")
    console.log(this.permission)
    this.getuserpermission()
  },
  methods: {
    gongsishuju(){
      this.$router.push('/company')
    },
    onMouseOver() {
      this.flag = true;
    },
    onMouseOut() {
      this.flag = false;
    },
    celueyanjiu () {
        this.$router.push('/strategy_research')
    },
    celueguangchang () {
      this.$router.push('/strategy_Campaign')
    },
    monijiaoyi () {
      this.$router.push('/mock_trading')
    },
    lianghuashequ () {
      this.$router.push('/community')
    },
    denglu (){
      localStorage.setItem("loginflag", 0);
      this.$router.push('/login')
    },
    zhuce (){
      localStorage.setItem("loginflag", 1);
      this.$router.push('/login')
    },
    gupiaoshuju (){
      this.$router.push('/data')
    },
    huice(){
      this.$router.push('/backtest')
    },
    help () {
      this.$router.push('/help')
    },
    shouye () {
      this.$router.push('/shouye')
    },
    personal () {
      this.$router.push('/personal')
    },
    // help () {
    //   this.$router.push('/help')
    // },
    exit () {
      // 批量删除
      // this.SessionToken = null
      localStorage.clear()
      this.$router.push('/login')
      // Vue.prototype.$user = ''
    },
    getuserpermission () {
      let id = localStorage.getItem('Userid')
      console.log(id)
      if(id != null){
        // 根据获取的用户名
        this.$http.get('getInformation?id='+id+'').then((resp) => {
          if (resp.data.status === 200) {
            this.username = resp.data.data.name
            this.usertype = resp.data.data.type
            let arr = resp.data.data.jsb.authority
            if(arr !== ''){
              arr = arr.split("*")
            }
            // console.log(arr)
            localStorage.setItem('permission',arr)
          }else if(resp.data.status === 499){
            this.$message.error('当前用户没有该权限！')
          } else {
            console.log('获取用户信息失败')
          }
        })
      }
      
    },
    // investment(){
    //   this.$router.push('/investment')
    // }
  }
};
</script>